<template>
  <div class="monthly">
    <el-form :model="searchData" class="searchForm">
    	<el-form-item>
    	  <el-input class="seech1" v-model="searchData.keyword" placeholder="输入停车场查询规则"></el-input>
    	</el-form-item>
      <el-form-item style="width: 80px;">
        <el-button type="primary" @click="getTableData()">搜索</el-button>
      </el-form-item>
      <el-form-item style="width: 100px;">
        <el-button type="success" @click="addShow = true">新增规则</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" @click="combinationShow = true">组合服务规则设置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="ruleName" label="规则名称" align="center">
      </el-table-column>
      <el-table-column prop="parkCount" label="适用停车场数量" align="center">
      </el-table-column>
      <el-table-column prop="rule" label="规则内容" align="center">
        <template slot-scope="scope">
          <el-popover trigger="hover">
            <span slot="reference" class="seeRule">鼠标移入查看</span>
            <span v-html="scope.row.rule"></span>
          </el-popover>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="openPerson" label="充值人次" align="center">
      </el-table-column>
      <el-table-column prop="openbank" label="充值总金额(元)" align="center">
      </el-table-column> -->
      <el-table-column prop="remark" label="备注" align="center">
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#46a6ff"
            inactive-color="#ccc"
            @change="switchStatus(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="warning" size="mini" @click="upDataShow = true; id = scope.row.id">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination :hide-on-single-page="false" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchData.pageNum" :page-sizes="[10, 15, 20, 30]" :page-size="10" background layout="total, sizes, prev, pager, next, jumper" :total="total" align="center" style="margin-top:30px;">
    </el-pagination>

    <el-dialog title="新增月租卡设置" :visible.sync="addShow" width="720px">
      <AddMonthly v-if="addShow" @closeDialog="addShow = false" @refresh="getTableData"/>
    </el-dialog>

    <el-dialog title="修改月租卡设置" :visible.sync="upDataShow" width="720px">
      <UpdataMonthly v-if="upDataShow" @closeDialog="upDataShow = false" :id="id" @refresh="getTableData"/>
    </el-dialog>

    <el-dialog title="组合服务设置" :visible.sync="combinationShow" width="620px">
      <Combination v-if="combinationShow" @closeDialog="combinationShow = false" @refresh="getTableData"/>
    </el-dialog>
  </div>
</template>

<script>
  import Combination from './components/combination.vue'
  import AddMonthly from './components/addMonthly.vue'
  import UpdataMonthly from './components/updataMonthly.vue'

  export default {
    name: 'monthly',
    components:{ Combination , AddMonthly , UpdataMonthly },
    data() {
      return {
        addShow: false,
        upDataShow: false,
        combinationShow: false,
        tableData: [],
        searchData: {
          pageNum: 1,
          pageSize: 10
        },
        total:null,
      }
    },
    mounted() {
      this.getTableData();
    },
    methods: {
      getTableData() {
        this.$axios({
          method: 'get',
          url: '/promotion/month-rule/getMonthRulePage',
          params: this.searchData
        }).then((res) => {
          res.data.records.forEach((item)=>{
            item.status = item.status == 'OPEN' ? true : false
            item.rule = item.rule.replaceAll("|", "<br>")
          })
          this.tableData = res.data.records;
          this.total = res.data.total;
        })
      },

      switchStatus(e){
        let status = e.status == true ? 'OPEN' : 'CLOSE';
        this.$axios({
          method: 'post',
          url: '/promotion/month-rule/switchStatus',
          data: this.$qs.stringify({ id : e.id, status: status })
        }).then((res) => {
        if(res.code == 200) {
          this.$message.success('规则状态修改成功！')
        } else {
          this.$message.warning('规则状态修改失败！')
        }
      })
      },
      //分页修改每页显示条数
      handleSizeChange(val){
        this.searchData.pageSize = val;
        this.getTableData();
      },
      //分页跳转页面
      handleCurrentChange(val){
        this.searchData.pageNum = val;
        this.getTableData();
      },
    }
  }
</script>

<style scoped>
 .searchForm .el-form-item {
 	width: 180px;
 	display: inline-block;
 }
 .seech1 {
  width: 160px;
 }
 .seeRule {
   color: #09CCDE;
 }
 .seeRule:hover {
   cursor: pointer;
 }

</style>
